<template>
    <canvas id="canvas-seatmap" canvas-id="canvas-seatmap"  type="2d" :hidpi="true" :disable-scroll="true" 
         :style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }"
          @touchstart="onTouchStart"
          @touchmove="onTouchMove"
          @touchcancel="onTouchEnd"
          @touchend="onTouchEnd"
          @click="onTap"
          @ready="onCanvasReady">
    </canvas>
</template>

<script>
    import seatmap from "./main.js";
    export default {
        name: 'canvas-seatmap',
        data() {
            return {
                pixelRatio : 1,
                canvasWidth: 0,
                canvasHeight:0,
                chooseSeatList:[],
                colorList: [
                    '#ffc284', // 浅黄色
                    '#97cafc', // 浅蓝色
                    '#C1A3A3', // 干枯玫瑰
                    '#ffb0bc', // 浅粉色
                    '#b6e67f', // 浅绿色
                ],
                moveing : false,
                options:[]
            }
        },
        methods: {
            async init({ seatList, options }) {
                this.seatList = seatList;
                this.options = options; console.log(options)

                // #ifdef MP-WEIXIN || H5 || MP-ALIPAY
                this.onCanvasReady();
                // #endif
            },
            async onCanvasReady(e){
                
                const canvasRect = await this.getElementRect();
                const { windowWidth, windowHeight, pixelRatio } = uni.getWindowInfo();
                this.canvasWidth  = windowWidth;
                this.canvasHeight = windowHeight - (canvasRect.top || 0);
                this.options = {...this.options,...{pixelRatio,canvasWidth:this.canvasWidth,canvasHeight:this.canvasHeight},topHeight:canvasRect.top||0};
               
                uni.createSelectorQuery().in(this).select('#canvas-seatmap').node().exec((res) => {
                    const canvas = res[0].node;
                    const {seatList,options} = this;
                    // #ifndef H5 
                    const ctx = canvas.getContext('2d');
                    const {pixelRatio,canvasWidth,canvasHeight} = options;
                    canvas.width = canvasWidth * pixelRatio
                    canvas.height = canvasHeight * pixelRatio
                    ctx.scale(pixelRatio, pixelRatio)
                    // #endif
                    this.seatmapInstance = new seatmap({
                        canvas, seatList, options
                    });
                    console.log('onCanvasReady:画布初始化完成')
                });
            },
            onTouchStart(e) {
                this.seatmapInstance.onTouchStart(e);
            },
            onTouchMove(e) {
                this.seatmapInstance.onTouchMove(e);
            },
            onTouchEnd(e) {
                this.seatmapInstance.onTouchEnd(e);
                
            },
            onTap(e){
                console.log('onTap',e)
                if(e.detail == undefined )throw new Error('支付宝小程序开发者工具点击事件不返回坐标，请使用支付宝小程序真机调试')
                let { x, y } = e.detail; //微信 h5是相对于文档的坐标 支付宝是相对于画布的坐标
                // #ifdef MP-WEIXIN || H5
                    y -= this.options.topHeight 
                // #endif
                this.seatmapInstance.onSeatTap({ x, y })
                .then(({ ok, msg })=>{
                    this.$emit('onSeatTap', { chooseSeatList:  this.seatmapInstance.chooseSeatList() });
                    if (!ok) this.$emit('error', { message: msg, details: msg });
                });
            },
            cancelSeat(seat) {
                this.seatmapInstance.cancelSeat(seat)
                this.$emit('onSeatTap', { chooseSeatList:  this.seatmapInstance.chooseSeatList() });;
            },
            validateIsolates(){
                return this.seatmapInstance.validateIsolates();
            },
           
            async  getElementRect() {
                return new Promise((resolve) => {
                    uni.createSelectorQuery().in(this)
                        .select(`#canvas-seatmap`)
                        .boundingClientRect(res => {
                            resolve(res)
                        })
                        .exec();
                });
            }
        }

    }

</script>